<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta charset="utf-8">  
        <script type="text/javascript" src="static/js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" charset="utf-8">
            function getLeft(e){
                var offset=e.offsetLeft;
                if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
                return offset;
            }

            function drawLine(context, startx, starty, endx, endy){
                context.beginPath();
                context.moveTo(startx, starty);
                context.lineTo(endx, endy);
                context.closePath();
                context.stroke();
            }
            
            function drawRectangle(context, x, y, w, h, fill){
                context.beginPath();
                context.rect(x, y, w, h);
                context.closePath();
                context.stroke();
                if(fill){
                    context.fill();
                }
            }

            function drawCursor(context){
                var default_width = "10";
                var default_height= "14";
                var metrics = context.measureText("@");
                var width = metrics.width
                drawRectangle(context, 0, 0, width, default_height, true)
            }

            function drawText(context){
                context.fillStyle    = '#00F';
                context.font         = 'Italic 30px Sans-Serif';
                context.textBaseline = 'Top';
                context.fillText  ('Hello world!', 40, 100);
                
            }
            $(function(){
                    /*
                    var canvas = document.getElementById("panel");
                    var context = canvas.getContext("2d");
                    drawCursor(context)
                    drawText(context)
                    */

            })

        </script>
        <style type="text/css" media="screen">
        </style>
    </head>
    <body>
        <div id="text">
            <canvas id="panel" style="border: 1px solid; ">
                sorry your browser not support canvas
            </canvas>
            <div id="t" style="border: 1px solid; ">
                fsajdifjos
            </div>
        </div>
    </body>
</html>
